<template>
  <div>
    <div class="flex-box">
      <div class="flex-1 padding-left-right-15">
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">建筑面积：</span>
          <span>{{ model.buildingArea }}m²</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">当前租金单价：</span>
          <span>{{ assetObj.rentUnitPrice || 0 | fmoneyThousand }}元/m²/日</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">当前管理费单价：</span>
          <span>{{ assetObj.managementUnitPrice || 0 | fmoneyThousand }}元/m²/日</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">本财年应收：</span>
          <span>{{ assetObj.yearReceivableAmount || 0 | fmoneyThousand }}元</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">本财年累计收款：</span>
          <span>{{ assetObj.yearIncomeAmount || 0 | fmoneyThousand }}元</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">逾期次数：</span>
          <span>{{ assetObj.arrearsNum }}</span>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="flex-1 padding-left-right-15">
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">CAD面积：</span>
          <span>{{ model.cadArea }}m²</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">租金指导价：</span>
          <span>{{ model.rentGuidePrice || 0 + model.rentGuideUnit || 0 | fmoneyThousand }}元/m²/日</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">管理费指导价：</span>
          <span>{{ model.managementGuidePrice || 0 + model.managementGuideUnit || 0 | fmoneyThousand }}元/m²/日</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">本合同累计收款：</span>
          <span>{{ assetObj.contractTotalAmount || 0 | fmoneyThousand }}元</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">商铺累计收款：</span>
          <span>{{ assetObj.shopTotalAmount  || 0 | fmoneyThousand }}元</span>
        </div>
        <div class="flex-box margin-bottom-40">
          <span class="font-weight-600">推荐业态：</span>
          <span>{{assetObj.recommendIndustryType || '无'}}</span>
        </div>
      </div>
    </div>

    <div v-if="model.points" class="relative-box" style="width: 500px; height: 300px; z-index: 99; overflow: hidden">
      <svg-item :key="guid()" :model="model" :points="model.points"></svg-item>
    </div>
  </div>
</template>
<script>
  import { requestTips, askDialog } from '@js/utils';
  import { formValid } from '@/lib/utils';
  import svgItem from '@c/svgItem';
  import { guid } from '@/common/js/utils';

  export default {
    props: {
      model: {
        type: Object,
        default: null,
      },
      assetObj: {
        type: Object,
        default: null,
      },
    },

    data() {
      return {
        statusNmae: {
          2: '已出账',
          0: '待出账',
          4: '已付款',
        },
        guid: guid,
      };
    },

    mounted() {},

    methods: {},

    components: { svgItem },
  };
</script>
<style lang="scss" scoped>
  .split-line {
    width: 1px;
    height: 100px;
    background: #f1f1f1;
    margin: 0 80px;
  }
  .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf {
    background: #f1f1f1;
  }
  ::v-deep .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none;
  }
  ::v-deep .el-table thead .cell {
    font-size: 14px;
  }
</style>
